<template>
  <div>
    <el-card class="box-card">
      <!-- tab栏 -->
      <el-tabs v-model="activeName">
        <!-- 商机页 -->
        <el-tab-pane label="商机" name="first" />

        <!-- 公海池页 -->
        <el-tab-pane label="公海池" name="second" />
        <component
          :is="activeName"
        />
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import first from './components/first.vue'
import second from './components/second.vue'
export default {
  components: {
    first,
    second
  },
  data() {
    return {
      // tab栏默认选中
      activeName: 'first'
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item {
  width: 150px;
  text-align: center;
}
::v-deep .el-tabs__active-bar {
  height: 3px;
  width: 100%;
}

</style>

